<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hzy的冰墩墩</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    html {
      width: 100%;
      height: 100%;
    }

    body {
      /* font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif; */
      background-image: linear-gradient(#0ac2f3, #e4f3f6);
      color: #000;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    /* 冰墩墩开始 */
    .bingdundun {
      position: absolute;
      left: 35%;
      top: 100px;
    }

    .m_body {
      width: 3.7708rem;
      height: 4.2708rem;
      border: #393939 .0833rem solid;
      margin: .5208rem auto;
      border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
      position: absolute;
      left: 1.1354rem;
      top: -0.3125rem;
      background: #fff;
    }

    .ear1,
    .ear2 {
      background: #393939;
      width: .8438rem;
      height: 1.1979rem;
      border-radius: 50%;
      position: absolute;
      z-index: -1;
    }

    .ear1 {
      left: 1.5625rem;
      top: .2708rem;
      transform: rotate(-10deg);
    }

    .ear2 {
      left: 3.7708rem;
      top: .2917rem;
      transform: rotate(10deg);
    }

    .eye1,
    .eye2 {
      background: #393939;
      width: .8646rem;
      height: 1.1979rem;
      border-radius: 50%;
      position: absolute;
    }

    .eye1 {
      left: 1.9271rem;
      top: 1.2708rem;
      transform: rotate(45deg);
    }

    .eye2 {
      left: 3.4271rem;
      top: 1.2708rem;
      transform: rotate(-45deg);
    }

    .eye1:before,
    .eye2:before {
      content: "";
      width: .4167rem;
      height: .4167rem;
      border: #fff .0521rem solid;
      border-radius: 100%;
      position: absolute;
    }

    .eye1:before {
      right: .1042rem;
      top: .2292rem;
    }

    .eye2:before {
      left: .1042rem;
      top: .2292rem;
    }

    .eye1:after,
    .eye2:after {
      content: "";
      width: .1042rem;
      height: .1042rem;
      background: #fff;
      border-radius: 100%;
      position: absolute;
    }

    .eye1:after {
      right: .2813rem;
      top: .3229rem;
    }

    .eye2:after {
      left: .4271rem;
      top: .4583rem;
    }

    .face {
      position: absolute;
      border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
    }

    .c_blue {
      border: #6bcdf3 5px solid;
      width: 2.9167rem;
      height: 2.3333rem;
      left: 1.5625rem;
      top: .8125rem;
    }

    .c_red {
      border: #af2350 .0521rem solid;
      width: 2.9896rem;
      height: 2.4271rem;
      left: 1.5208rem;
      top: .7604rem;
    }

    .c_purple {
      border: #5d75b3 .0521rem solid;
      width: 3.0729rem;
      height: 2.5rem;
      left: 1.4792rem;
      top: .7292rem;
    }

    .c_yellow {
      border: #ffc346 .0521rem solid;
      width: 3.1771rem;
      height: 2.5833rem;
      left: 1.4271rem;
      top: .6771rem;
    }

    .c_green {
      border: #7fcb58 .0521rem solid;
      width: 3.2604rem;
      height: 2.6667rem;
      left: 1.3854rem;
      top: .6354rem;
    }

    .arm1,
    .arm2 {
      background: #333;
      position: absolute;
      z-index: -1;
    }

    .arm1 {
      width: .7813rem;
      height: 1.2292rem;
      left: .6667rem;
      top: 2.5417rem;
      transform: rotate(45deg);
      border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
    }

    .arm2 {
      width: .7813rem;
      height: 1.5417rem;
      left: 4.5938rem;
      top: .8333rem;
      transform: rotate(37deg);
      border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
      animation: move 1s infinite alternate;
      transform-origin: left bottom;
    }

    @keyframes move {
      form {
        transform: rotate(27deg);
      }

      to {
        transform: rotate(67deg);
      }
    }

    .arm2:before {
      content: "";
      width: .1667rem;
      height: .25rem;
      background: #bc242c;
      position: absolute;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      transform: rotate(45deg);
      left: .3333rem;
      top: .2083rem;
    }

    .arm2:after {
      content: "";
      width: .1667rem;
      height: .25rem;
      background: #bc242c;
      position: absolute;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      transform: rotate(-45deg);
      left: .2708rem;
      top: .2083rem;
    }

    .arm_c {
      content: "";
      width: .1667rem;
      height: .25rem;
      position: absolute;
      left: 4.4375rem;
      top: .2083rem;
    }

    .nose {
      background-color: #333333;
    }

    .nose:before,
    .nose:after {
      content: '';
      position: absolute;
      background-color: inherit;
    }

    .nose,
    .nose:before,
    .nose:after {
      width: .2917rem;
      height: .1875rem;
      border-radius: .4375rem .4375rem .625rem .6354rem/ .3125rem .3125rem .5208rem .4792rem;
    }

    .nose {
      position: absolute;
      left: 2.9583rem;
      top: 1.9479rem;
    }

    .mouse {

      position: absolute;
      left: 2.6979rem;
      top: 2.2813rem;
      width: .8125rem;
      height: .625rem;
      border-radius: 50%;
      border-left: 0;
      border-right: 0;
      background: #393939;
    }

    .mouse::before {
      content: '';
      position: absolute;
      width: .4167rem;
      height: .2604rem;
      background-color: #fff;
      border-radius: 50%;
      left: .1875rem;
      top: -0.1146rem;
    }

    .mouse::after {
      content: '';
      position: absolute;
      width: .5417rem;
      height: .3333rem;
      background-color: #bc242c;
      border-radius: 50%;
      left: .1458rem;
      top: .2604rem;
    }

    .leg1,
    .leg2 {
      background: #333;
      position: absolute;
      width: .8646rem;
      height: .8333rem;
      border-radius: 0 0 .3125rem .3125rem;
      z-index: -1;
    }

    .leg1 {
      left: 1.9479rem;
      top: 4.4063rem;
    }

    .leg2 {
      left: 3.4167rem;
      top: 4.4063rem;
    }

    .leg1:after,
    .leg2:after {
      content: "";
      width: .4479rem;
      height: .3125rem;
      position: absolute;
      background: #363636;
      border-radius: .3125rem;
    }

    .leg1:after {
      bottom: 0;
      right: -0.0313rem;
    }

    .leg2:after {
      bottom: 0;
      left: -0.0313rem;
    }

    .m_body img {
      position: absolute;
      bottom: .0208rem;
      left: 50%;
      transform: translate(-50%);
      width: 1.25rem;
    }

    .title {
      width: 16rem;
      font-size: 1.2rem;
      color: aqua;
      position: absolute;
      top: 10.25rem;
      left: 60%;
      transform: translateX(-50%);
    }

    @media screen and (min-width:1000px) {
      .title {
        width: 16rem;
        font-size: 1.2rem;
        color: aqua;
        position: absolute;
        top: 70% !important;
        left: 60%;
        transform: translateX(-50%);
      }
    }
  </style>
</head>

<body>
  <div class="bingdundun">
    <div class="m_body">
      <!-- 这里冬奥会图标也可以css写比较繁琐，这里直接用图片啦 -->
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F46657c5164a1637f8b015ff44be27a020345311d25243-5BjOfc_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647052580&t=9841b8371651dd08d9e9eb09b913f78e"
        alt="">
    </div>
    <div class="ear1"></div>
    <div class="ear2"></div>
    <div class="eye1"></div>
    <div class="eye2"></div>
    <div class="face c_blue"></div>
    <div class="face c_red"></div>
    <div class="face c_purple"></div>
    <div class="face c_yellow"></div>
    <div class="face c_green"></div>
    <div class="nose"></div>
    <div class="mouse"></div>
    <div class="arm1"></div>
    <div class="arm2"></div>
    <div class="leg1"></div>
    <div class="leg2"></div>
  </div>
  <p class="title">The picture by hanziyi</p>
  <div id="snow"></div>
  <script>
    function Obj() { }  // 创建构造函数

    /*为这个构造函数挂载一个具有一个参数的原型方法*/
    Obj.prototype.draw = function (o) {
      let speed = 0   //雪花每次下落的数值（10px）
      let startPosLeft = Math.ceil(Math.random() * document.documentElement.clientWidth)//设置雪花随机的开始x值的大小
      o.style.opacity = (Math.ceil(Math.random() * 3) + 7) / 10  //设置透明度
      o.style.left = startPosLeft + 'px'
      o.style.color = "#fff"
      o.style.fontSize = 12 + Math.ceil(Math.random() * 14) + 'px'
      setInterval(function () {
        //雪花下落的top值小鱼屏幕的可视区域高时执行下列
        if (speed < document.documentElement.clientHeight) {
          o.style.top = speed + 'px'
          o.style.left = startPosLeft + Math.ceil(Math.random() * 8) + 'px'
          speed += 10
        }
        else {
          o.style.display = 'none'
        }
      }, 80);
    }

    const snow = document.querySelector('#snow')

    /*使用setInterval定时器每400毫秒创建一个雪花*/
    setInterval(function () {
      const odiv = document.createElement('div')  //创建div
      odiv.innerHTML = "✽"   //div的内容  想不到吧，原来雪花是个符号，一切都是那么简单，嘎嘎
      odiv.style.position = 'absolute'  //div的绝对定位
      snow.appendChild(odiv);  //把创建好的div放进snow中
      const obj = new Obj()   //实例化
      obj.draw(odiv)  //调用obj的draw方法
    }, 400)

  </script>
</body>
<script src="js/flexible.js"></script>

</html>